<?php
use common\service\StaticService;
use common\service\GlobalUrlService;
use backend\assets\AdminAsset;

StaticService::includeAppCssStatic('https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css',AdminAsset::class);
StaticService::includeAppJsStatic('https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js',AdminAsset::class);
StaticService::includeAppJsStatic('https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js',AdminAsset::class);
StaticService::includeAppJsStatic(GlobalUrlService::buildStaticUrl('/backend/tree/index.js'),AdminAsset::class);
?>

<!--<link href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">-->
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>-->

<div class="layui-card">
    <div class="layui-card-header">分类管理</div>
    <div class="layui-card-body">
        <div class="layui-form-item">
            <!-- <div class="layui-inline">
                <input type="file" id="excel" style="display:none;">
                <label class="layui-btn layui-btn-normal" id="tree-excel" for="excel" style="background-color: #1E9FFF!important;">导入分类</label>
            </div> -->
            <div class="layui-inline">
                <a href="<?= GlobalUrlService::buildAdminUrl('tree/add-tree')?>" class="layui-btn layui-btn-normal" style="background-color: #1E9FFF!important;">添加分类</a>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layer">
                <div id="tableMain">
                    <ul id="dataTree" class="ztree">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /*ztree表格*/
    .ztree {
        padding: 0;
        border: 1px solid #e6e6e6;
        font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif!important;
    }
    .ztree * {
        font-size: 14px;
    }
    .ztree li > a {
        width: 100%;
    }
    .ztree li > a,
    .ztree li a.curSelectedNode {
        padding-top: 0px;
        background: none;
        height: 38px;
        border: none;
        cursor: default;
        opacity: 1;
    }
    .ztree li ul {
        padding-left: 0px
    }
    .ztree div.diy span {
        line-height: 30px;
        vertical-align: middle;
    }
    .ztree div.diy {
        height: 100%;
        line-height:38px;
        width:33%;
        border-top: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
        color: #6c6c6c;
        overflow: hidden;
    }
    .ztree div.diy:first-child {
        text-align: left;
        text-indent: 10px;
        border-left: none;
    }
    .ztree .head {
        height:38px;
        background: #f2f2f2;
    }
    .ztree .head div.diy {
        border-top: none;
        border-right: 1px solid #e6e6e6;
        color: #666;
        font-size: 14px;
    }
    .layui-btn {
        display: inline-block!important;
        background-color: #009688!important;
        color: #fff!important;
        white-space: nowrap!important;
        text-align: center!important;
        border: none!important;
        border-radius: 2px!important;
        cursor: pointer!important;
        vertical-align:middle!important;
    }
    .layui-btn-xs {
        height: 22px!important;
        line-height: 22px!important;
        padding: 0 5px!important;
        font-size: 12px!important;
    }
</style>